﻿<div class="label">
    Right click an image to display the context menu:
</div>
<img id="image" src="~/images/ProductsLarge/5.png" />

@(Html.DevExtreme().ContextMenu()
    .Width(200)
    .Target("#image")
    .ItemTemplate(@<text>
        <div>
            <% if(typeof Icon !== "undefined") { %>
            <span class="<%- Icon %>"></span>
            <% } %>

            <% if(typeof Items !== "undefined") { %>
            <span class="dx-icon-spinright"></span>
            <% } %>

            <%- Text %>
        </div>
    </text>)
    .OnItemClick("contextMenu_itemClick")
    .DisplayExpr("Text")
    .ItemsExpr("Items")
    .DataSource(new object[] {
        new {
            Text = "Share",
            Icon = "dx-icon-globe",
            Items = new[] {
                new { Text = "Facebook" },
                new { Text = "Twitter" }
            }
        },
        new {
            Text = "Download",
            Icon = "dx-icon-download"
        },
        new {
            Text = "Add Comment",
            Icon = "dx-icon-add"
        },
        new {
            Text = "Add to Favorite",
            Icon = "dx-icon-favorites"
        }
    })
)

<script>
    function contextMenu_itemClick(e) {
        if(!e.itemData.Items) {
            DevExpress.ui.notify("The \"" + e.itemData.Text + "\" item was clicked", "success", 1500);
        }
    }
</script>
